<template>
  <div>
    <div class="box">
      <div><img :src="`${imgNav}`" class="imgNav"></div>
      <div class="title">
        <div v-for="(a, index) in titleList" :key="a.log_code" :class="{ active: active == index }"
          @click="changeActive(index)">{{ a.title }}</div>
      </div>
      <!--c.path是跳转的id -->
      <div class="content1" v-for="(b) in saveList">
        <h4 id="index" ref="tt">{{ b.body.title }}</h4>
        <div class="shop">
          <div v-for="c in b.body.items" class="sort" :key="c.action.path">
            <div>
              <router-link :to="{ name: 'info', params: { id: c.action.path } }">
                <img :src="`${c.img_url}`" class="img"></router-link>

            </div>
            <div class="ziti">{{ c.product_name }}</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps(['id', 'height'])
import { List } from '@/api/sort.js'
import { ref, watch, } from 'vue'
const list = ref('')
const tt = ref()
const imgNav = ref('')
const titleList = ref([])
const active = ref(0)
const shopList = ref('')
const saveList = ref([])
const newList = ref([])
const allHeight = ref([])
const hhh = async (id: any) => {
  let data = await List(id)
  list.value = data.data.data

  imgNav.value = list.value[0].category_list[0].body.items ? list.value[0].category_list[0].body.items[0].img_url : ""
  titleList.value = list.value[0].title_list ? list.value[0].title_list : []
  shopList.value = list.value[0].category_list.splice(1)

  getShopList()

}
hhh(props.id)

const getShopList = () => {
  for (let i = 0; i < shopList.value.length; i++) {
    if (i % 2 == 1) {
      newList.value.push(shopList.value[i])
    }
  }
  saveList.value = newList.value
  // console.log(saveList.value);

  newList.value = []
}
const changeActive = (index) => {
  active.value = index
  const h4Element = document.querySelectorAll("#index")
  if (h4Element) {
    h4Element[index].scrollIntoView({ behavior: "smooth", block: "start" });
  }
}
const scrollActive = (head) => {
  const height = document.querySelectorAll('.content1')
  for (let i = 0; i < height.length; i++) {

    allHeight.value.push(height[i].offsetTop - 70)
  }
  allHeight.value = allHeight.value.splice(0, height.length)
  for (let j = 0; j < allHeight.value.length; j++) {
    if (head >= allHeight.value[j]) {
      active.value = j
    }

  }
}



watch(props, (newID) => {
  hhh(newID.id)
  scrollActive(newID.height)

})
</script>
<style scoped>
.imgNav {
  width: 300px;

}

.title {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 300px;
  /* width: 311.52px; */
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
  background-color: white;
  z-index: 100;
}

.title::-webkit-scrollbar {
  height: 0px;
}

.title>div.active {
  background-color: #efefef;
  color: black;
}

.title>div {
  width: 110px;
  height: 20px;
  text-align: center;
  line-height: 22px;
  font-size: 13px;
  color: gray;
  margin-left: 15px;
  margin-top: 5px;
}

.my {
  margin-top: 20px;
}

.img {
  width: 95px;
}

.shop {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;

  justify-content: flex-start;
}

.sort {
  width: 95px;
  text-align: center;
  background-color: #f8f8f8;
  margin-bottom: 5px;
  margin-left: 5px;
}

.ziti {
  width: 95px;
  font-size: 13px;
  color: gray;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a {
  color: inherit;
  text-decoration: none;
}
</style>